<script  setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import axios from '../../utils/http.js'
const info = ref()
// 全班人数
let total_students = ref([])
// 违纪
let discipline_count = ref([])
// 班级名称
let class_name = ref([])

function getBreakList(){
  axios({
    url:'info/getbreak',
    method:'get',
    params: {
      classes: '智能A班'
    },
  }).then(
    res => {
      let data = res.data.class_statistics
      
      for (let i = 1; i <= 2; i++) {
        console.log(data[i]);
        class_name.value.push(data[i].class_name)
        total_students.value.push(data[i].total_students)
        discipline_count.value.push(data[i].discipline_count)
      }
      rule_list_echarts()
    })
}

function rule_list_echarts(){
  
  var infoEl = info.value
  var userEc = echarts.init(infoEl, "light")
  var option = {
    backgroundColor: "#fff",
    "title": {
      "text": "班级违纪情况",

      x: "4%",

      textStyle: {
        color: '#fff',
        fontSize: '22'
      },
      subtextStyle: {
        color: '#90979c',
        fontSize: '16',

      },
    },
    "tooltip": {
      "trigger": "axis",
      "axisPointer": {
        "type": "shadow",
        textStyle: {
          color: "#fff"
        }

      },
    },
    "grid": {
      "borderWidth": 0,
      "top": 110,
      "bottom": 95,
      textStyle: {
        color: "#fff"
      }
    },
    "legend": {
      x: '4%',
      top: '8%',
      textStyle: {
        color: '#90979c',
      },
      "data": ['正常', '违纪', '平均']
    },


    "calculable": true,
    "xAxis": [{
      "type": "category",
      "axisLine": {
        lineStyle: {
          color: '#90979c'
        }
      },
      "splitLine": {
        "show": false
      },
      "axisTick": {
        "show": false
      },
      "splitArea": {
        "show": false
      },
      "axisLabel": {
        "interval": 0,

      },
      "data": class_name.value,
    }],
    "yAxis": [{
      "type": "value",
      "splitLine": {
        "show": false
      },
      "axisLine": {
        lineStyle: {
          color: '#90979c'
        }
      },
      "axisTick": {
        "show": false
      },
      "axisLabel": {
        "interval": 0,

      },
      "splitArea": {
        "show": false
      },

    }],
    "dataZoom": [{
      "show": true,
      "height": 30,
      "xAxisIndex": [
        0
      ],
      bottom: 30,
      "start": 10,
      "end": 80,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
        color: "#d3dee5",

      },
      textStyle: {
        color: "#fff"
      },
      borderColor: "#90979c"


    }, {
      "type": "inside",
      "show": true,
      "height": 15,
      "start": 1,
      "end": 35
    }],
    "series": [{
      "name": "正常",
      "type": "bar",
      "stack": "总量",
      "barMaxWidth": 35,
      "barGap": "10%",
      "itemStyle": {
        "normal": {
          "color": "rgba(255,144,128,1)",
          "label": {
            "show": true,
            "textStyle": {
              "color": "#fff"
            },
            "position": "inside",
            formatter: function (p) {
              return p.value > 0 ? (p.value) : '';
            }
          }
        }
      },
      "data": total_students.value - discipline_count.value,
    },

    {
      "name": "违纪",
      "type": "bar",
      "stack": "总量",
      "itemStyle": {
        "normal": {
          "color": "rgba(0,191,183,1)",
          "barBorderRadius": 0,
          "label": {
            "show": true,
            "position": "inside",
            formatter: function (p) {
              return p.value > 0 ? (p.value) : '';
            }
          }
        }
      },
      "data": discipline_count.value,
    }, {
      "name": "总数",
      "type": "line",
      symbolSize: 10,
      symbol: 'circle',
      "itemStyle": {
        "normal": {
          "color": "rgba(252,230,48,1)",
          "barBorderRadius": 0,
          "label": {
            "show": true,
            "position": "top",
            formatter: function (p) {
              return p.value > 0 ? (p.value) : '';
            }
          }
        }
      },
      "data": total_students.value
    },

    ]
  }
  userEc.setOption(option)
}
onMounted(()=>{
  getBreakList()
})
</script>
<template>
  <div ref="info" style="width: 1000px; height: 300px"></div>
  <!-- <button @click="getBreakList">获取数据</button> -->
</template>
<style  scoped>

</style>